import { BottomNavigation, BottomNavigationAction } from '@material-ui/core'
import { EmojiEmotions, Favorite, FiberNew, Whatshot, Search } from '@material-ui/icons'
import { useState, useCallback } from 'react'
import { makeStyles } from '@material-ui/core/styles'
import { green, orange, red, brown, blue } from '@material-ui/core/colors'
import { useHistory } from 'react-router-dom'

const useStyles = makeStyles({
    root: {
        position: 'fixed',
        left: '0',
        bottom: '0',
        width: '100%'
    }
})

function Footer() {
    const history = useHistory()
    const [currentNav, setNav] = useState(history.location.pathname)
    const changeNav = useCallback((event, newValue) => {
        setNav(newValue)
        history.push(newValue)
    }, [setNav, history])
    return (
        <BottomNavigation
            value={currentNav}
            onChange={changeNav}
            showLabels
            className={useStyles().root}
        >
            <BottomNavigationAction value='/trends' label='动态' icon={<EmojiEmotions style={{ color: blue[500] }} />} />
            <BottomNavigationAction value='/new' label='最新' icon={<FiberNew style={{ color: orange[500] }} />} />
            <BottomNavigationAction value='/hot' label='热门' icon={<Whatshot style={{ color: red[500] }} />} />
            <BottomNavigationAction value='/collect' label='收藏' icon={<Favorite style={{ color: green[500] }} />} />
            <BottomNavigationAction value='/search' label='搜索' icon={<Search style={{ color: brown[500] }} />} />
        </BottomNavigation>
    )
}

export default Footer